<template>
  <div>
    <userTitel :title="title"></userTitel>
    <!-- 卡片1 -->
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="司机账号">
          <el-input
            v-model="formObj.account"
            style="width: 390px; margin-right: 60px"
            placeholder="请输入司机账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机姓名">
          <el-input
            v-model="formObj.name"
            style="width: 390px; margin-right: 60px"
            placeholder="请输入司机姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机手机号">
          <el-input
            v-model="formObj.mobile"
            style="width: 390px"
            placeholder="请输入司机手机号"
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="所属机构 :">
          <el-select
            @clear="handleClear"
            v-model="formObj.agency.name"
            style="width: 390px"
            placeholder="请选择所属机构"
          >
            <el-option
              hidden
              :value="formObj.agency.name"
              :label="formObj.agency.name"
            >
            </el-option>
            <el-tree
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClickOne"
            ></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 60px">
          <el-button type="primary" @click="so">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 卡片2 -->
    <el-card shadow="never" style="margin-top: 20px">
      <el-table border :data="formData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="account" label="司机账号"> </el-table-column>
        <el-table-column prop="name" label="司机姓名"> </el-table-column>
        <el-table-column prop="mobile" label="司机手机号"> </el-table-column>
        <el-table-column prop="truck.licensePlate" label="关联车辆">
        </el-table-column>
        <el-table-column prop="agency.name" label="所属机构"> </el-table-column>
        <!-- 0休息1上班 -->
        <el-table-column label="工作状态">
          <template #default="{ row }">
            <span
              :class="{ gree: row.workStatus === 1, red: row.workStatus === 0 }"
            ></span>
            <span>{{ row.workStatus ? "上班" : "休息" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-link
              @click="scope(row)"
              :underline="false"
              style="color: #6b9eff"
              >查看</el-link
            >
            <span> | </span>
            <el-link
              @click="eCar(row)"
              :underline="false"
              style="color: #6b9eff"
              >配置车辆</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+counts"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 配置弹窗 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="showDialog"
      width="30%"
      :before-close="handleClose"
    >
      <span>配置车辆需满足以下条件:</span>
      <br />
      <span class="spanSum">1</span>
      <span style="margin-left: 5px; margin-right: 100px">司机信息已完善</span>
      <span class="spanSum">2</span>
      <span style="margin-left: 5px">司机已设置排版</span>
      <br />
      <span class="spanSum">3</span>
      <span style="margin-left: 5px">司机绑定车辆未在启用状态</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="dispose">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 二层 -->
    <el-dialog
      title="配置车辆"
      :visible.sync="showDialogCar"
      width="40%"
      :before-close="handleClose"
    >
      <el-row
        type="flex"
        justify="center"
        style="background: #fbfafa; height: 90px; margin-bottom: 20px"
      >
        <el-form :inline="true">
          <el-form-item label="司机编号 :" style="margin-right: 100px">
            <span>{{ formDataTwo.userId }}</span>
          </el-form-item>
          <el-form-item label="司机名称 :">
            <span>{{ formDataTwo.name }}</span>
          </el-form-item>
          <br />
          <el-form-item label="司机电话 :" style="margin-right: 100px">
            <span>{{ formDataTwo.mobile }}</span>
          </el-form-item>
          <el-form-item label="所属机构 :">
            <span>{{ formDataTwo.agency.name }}</span>
          </el-form-item>
        </el-form>
      </el-row>
      <span>配置车辆 : </span>
      <el-select
        @change="select"
        filterable
        v-model="formDataTwo.truck.licensePlate"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.licensePlate"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <!-- 表格 -->
      <el-table
        border
        :data="dialogData"
        style="width: 100%; margin-top: 20px; margin-bottom: 20px"
      >
        <el-table-column prop="licensePlate" label="车牌号"> </el-table-column>
        <el-table-column prop="status" label="车辆状态">
          <template #default="{ row }">
            <span
              :class="{
                gree: row.workStatus === 1,
                red: row.workStatus === 0,
              }"
            ></span>
            <span>{{ row.workStatus ? "可用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-link style="color: #419eff">查看</el-link>
          <span> | </span>
          <el-link type="primary">删除</el-link>
        </el-table-column>
      </el-table>
      <!-- 按钮 -->
      <el-row type="flex" justify="center">
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  getDriver,
  getDialog,
  getCarInfo,
} from "@/api/operational-range";
export default {
  name: "driverIndex",
  data() {
    return {
      // 二层弹窗回显
      formDataTwo: {
        userId: "", //司机编号
        name: "", //司机名称
        mobile: "", //司机电话
        agency: { name: "" },
        truck: { licensePlate: "" },
      },
      // 弹窗表格
      dialogData: [{}],
      // 配置车辆弹窗选择器 //联动弹窗表格
      options: [],
      value: "", //选择器双向绑定
      // 一层
      showDialog: false,
      // 二层
      showDialogCar: false,
      title: "司机管理",
      // 树形
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 数据双向绑定
      formObj: {
        account: "", //司机账号
        name: "", //司机姓名
        mobile: "", //司机手机号
        agency: { name: "" }, //所属机构
      },
      // 表格数据列表获取
      formData: [{}],
      // 分页
      page: {
        page: 1,
        pageSize: 10,
      },
      currentPage4: 1, //默认第几页
      counts: "", //总条目
    };
  },

  created() {
    this.getMechanism();
    this.getUser();
    console.log(this.formDataTwo.truck.licensePlate);
  },

  methods: {
    // 下拉数据
    async getMechanism() {
      const res = await getList();
      console.log(JSON.parse(res.data));
      this.data = JSON.parse(res.data);
    },
    // 树形
    handleNodeClickOne(data) {
      console.log(data.name);
      this.formObj.agency.name = data.name;
      console.log(this.formObj);
    },
    handleClear() {
      this.name = "";
    },
    // 获取列表
    async getUser() {
      const res = await getDriver(this.page);
      console.log(res.data.items);
      this.formData = res.data.items;
      this.counts = res.data.counts;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getUser();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.getUser();
    },
    // 查找
    async so() {
      console.log("查找");
      const res = await getDriver({
        page: this.page.page,
        pageSize: this.page.pageSize,
        name: this.formObj.name, //快递员姓名
        mobile: this.formObj.mobile, //快递员手机号
        account: this.formObj.account, //快递员账号
        agency: this.formObj.agency.name, //
      });
      console.log(res);
      this.formData = res.data.items;
    },
    // 重置
    reset() {
      this.formObj = {
        account: "", //快递员账号
        name: "", //快递员姓名
        mobile: "", //快递员手机号
        agency: { name: "" }, //所属机构
        // workStatus: "", //工作状态
      };
    },
    // 详情
    scope(row) {
      console.log(row.userId);
      this.$router.push({
        path: "driver-detail",
        query: {
          id: row.userId,
        },
      });
    },
    // 配置弹窗
    handleClose(done) {
      this.$message("已取消");
      done();
    },
    eCar(row) {
      // 打开第一层弹层
      this.showDialog = true;
      console.log(row);
      this.formDataTwo = row;
      this.dialogData = [row.truck];
    },
    // 点击显示二层弹窗
    async dispose() {
      // 关闭一层
      this.showDialog = false;
      // 开启二层
      this.showDialogCar = true;
      // 下拉数据列表
      const res = await getDialog();
      console.log(res.data);
      this.options = res.data;
    },
    // change事件
    async select(value) {
      console.log(value);
      const res = await getCarInfo(value);
      console.log(res.data);
      this.dialogData = [res.data];
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-dialog__header {
  background-color: #f3f4f7;
}
.spanSum {
  margin-top: 10px;
  width: 16px;
  height: 16px;
  background-color: #fafcff;
  border: 1px solid #ebeef5;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
}
::v-deep .el-dialog {
  text-align: left;
  line-height: 20px;
}
.gree {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: green;
  border-radius: 50%;
}
.red {
  margin-right: 5px;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: red;
  border-radius: 50%;
}
::v-deep .el-card {
  text-align: left;
  line-height: 24px;
}
</style>
